<!-- 任务派工新增 -->
<template>
  <div>
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="120px"
      class="demo-ruleForm"
      :size="formSize"
      status-icon
    >
      <!-- 任务派工 -->
      <span style="font-size: 20px">任务派工</span>
      <el-row>
        <el-col :span="12">
          <div class="grid-content ep-bg-purple">
            <el-form-item label="班组名称" prop="ClassId">
              <el-input
                v-model="ruleForm.ClassId"
                style="width: 220px"
                @click="dialogTableVisible = true"
              />
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content ep-bg-purple-light">
            <el-form-item label="任务负责人" prop="ClassPrincipal">
              <el-input
                v-model="ruleForm.ClassPrincipal"
                disabled
                style="width: 220px"
              />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-form-item label="其他成员" prop="OtherMembers">
        <el-input v-model="ruleForm.OtherMembers" @click="dialogTable = true" />
      </el-form-item>
      <el-form-item label="备注" prop="TaskRemark">
        <el-input v-model="ruleForm.TaskRemark" type="textarea" />
      </el-form-item>
      <!-- 质检派工 -->
      <span style="font-size: 20px">质检派工</span>
      <el-row>
        <el-col :span="12">
          <el-form-item label="质检部门" prop="DepartmentId">
            <el-input
              v-model="ruleForm.DepartmentId"
              @click="centerDialogVisible = true"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <div class="grid-content ep-bg-purple-light">
            <el-form-item label="质检人员" prop="DepartmentName">
              <el-input
                v-model="ruleForm.DepartmentName"
                style="width: 220px"
                @click="centerDialog = true"
              />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-form-item label="备注" prop="QualityTestingRemark">
        <el-input v-model="ruleForm.QualityTestingRemark" type="textarea" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          保存
        </el-button>
        <el-button @click="resetForm(ruleFormRef)">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 嵌套表格 -->

    <el-dialog v-model="dialogTableVisible" title="选择班组">
      <el-table
        border
        :data="gridData"
        ref="multipleTableRef"
        @selection-change="multipleSelectionChang"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column
          property="id"
          label="序号"
          width="120"
        ></el-table-column>
        <el-table-column
          property="classname"
          label="班组名称"
          width="120"
        ></el-table-column>
        <el-table-column
          property="classencoding"
          label="班组编号"
          width="120"
        ></el-table-column>
        <el-table-column
          property="classtype"
          label="班组类型"
          width="120"
        ></el-table-column>
        <el-table-column
          property="principal"
          label="负责人"
          width="120"
        ></el-table-column>
        <el-table-column
          property="number"
          label="班组人数"
          width="120"
        ></el-table-column>
      </el-table>
      <el-button type="primary" @click="Banzu">确定</el-button>
      <el-button type="primary" plain>取消</el-button>
    </el-dialog>
    <!-- 其他成员 -->
    <el-dialog v-model="dialogTable" title="其他成员">
      <el-table
        border
        :data="gridData2"
        @selection-change="multipleSelectionChang2"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column
          property="membername"
          label="班组——成员"
          width="190"
        ></el-table-column>
      </el-table>
      <el-button type="primary" @click="queding">确定</el-button>
      <el-button type="primary" plain>取消</el-button>
    </el-dialog>
    <!-- 质检部门 -->
    <el-dialog
      v-model="centerDialogVisible"
      title="选择部门"
      width="30%"
      align-center
    >
      <!-- <span>Open the dialog from the center from the screen</span> -->
      <template #footer>
        <span class="dialog-footer">
          <el-tree
            :data="option"
            :props="defaultProps"
            @node-click="handleNodeClick"
          />
          <el-button @click="centerDialogVisible = false">确定</el-button>
          <el-button type="primary" @click="centerDialogVisible = false">
            取消
          </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 质检人员 -->
    <el-dialog v-model="centerDialog" title="质检人员">
      <el-table
        border
        :data="gridData3"
        @selection-change="multipleSelectionChang3"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column property="name" label="检验部门二科" width="190" />
      </el-table>
      <el-button type="primary" @click="zhijian">确定</el-button>
      <el-button type="primary" plain>取消</el-button>
    </el-dialog>
  </div>
</template>

<script>
import { reactive, ref } from "vue";
import { TeamorGroupShow, TeamorGroupSelect } from "../../api/teamorgroup";
import { AddSendWork, UserSelect } from "../../api/sendwork";
import { ElMessage } from "element-plus";
import { MemberSelect } from "../../api/member";
import { useRouter, useRoute } from "vue-router";
import { OrganizatTree } from "../../api/organization";
export default {
  setup() {
    //班组名称
    const dialogTableVisible = ref(false);
    //其他成员
    const dialogTable = ref(false);
    const router = useRouter();
    const route = useRoute();
    const code = ref();
    const option = ref([]);

    const ruleForm = reactive({
      //班组名称
      ClassId: "",
      //班组负责人
      ClassPrincipal: "",
      //其他成员
      OtherMembers: "",
      //备注
      TaskRemark: "",
      //质检部门
      DepartmentId: null,
      //质检人员
      DepartmentName: "",
      //备注
      QualityTestingRemark: "",
      MissionNumber: "",
    });
    //班组名称
    const gridData = ref([]);
    const gridData2 = ref([]);
    const gridData3 = ref([]);
    const getList = () => {
      TeamorGroupShow().then((res) => {
        gridData.value = res.result;
      });
      code.value = route.query.id;
      
      OrganizatTree().then((res) => {
        option.value = res.result;
        
      });
    };
    getList();
    //提交按钮
    const submitForm = () => {
      ruleForm.ClassId = multipleSelection.value[0].id;

      ruleForm.MissionNumber = code.value;
      AddSendWork(ruleForm).then((res) => {
        if (res.success == true) {
          ElMessage.success("派工成功");
          router.push("/TicketTaskList");
        } else {
          ElMessage.error("派工失败");
        }
      });
    };
    const multipleSelection = ref([]);
    const multipleSelection2 = ref([]);
    const multipleSelection3 = ref([]);
    const multipleSelectionChang = (val) => {
      multipleSelection.value = val;
      console.log(multipleSelection.value);
    };
    const multipleSelectionChang2 = (val) => {
      multipleSelection2.value = val;
      console.log(multipleSelection2.value);
    };
    const multipleSelectionChang3 = (val) => {
      multipleSelection3.value = val;
    };
    //质检部门
    const centerDialogVisible = ref(false);
    //质检人员
    const centerDialog = ref(false);
    //重置
    const ruleFormRef = ref();
    const handleNodeClick = (data) => {
      ruleForm.DepartmentId = data.value;

      UserSelect(data.value).then((res) => {
        gridData3.value = res.result;
        console.log(res);
      });
      //console.log(data);
    };
    const zhijian = () => {
      ruleForm.DepartmentName=""
      multipleSelection3.value.forEach((element) => {
        ruleForm.DepartmentName += element.name + ",";
      });
      centerDialog.value=false
    };
    const defaultProps = {
      children: "children",
      label: "label",
    };
    const Banzu = () => {
      ruleForm.ClassId = multipleSelection.value[0].id;
      ruleForm.OtherMembers = "";
      if (multipleSelection.value.length <= 0) {
        ElMessage.error("至少选择一项");
        return;
      }
      if (multipleSelection.value.length > 1) {
        ElMessage.error("只能选择一项");
        return;
      }
      TeamorGroupSelect(multipleSelection.value[0].id).then((res) => {
        ruleForm.ClassPrincipal = res.result;
      });
      MemberSelect(multipleSelection.value[0].id).then((res) => {
        gridData2.value = res.result;
        console.log(gridData2.value);
      });
      dialogTableVisible.value = false;
    };
    const queding = () => {
      ruleForm.OtherMembers = "";
      multipleSelection2.value.forEach((element) => {
        ruleForm.OtherMembers += element.membername + ",";
      });

      dialogTable.value = false;
    };

    return {
      ruleForm,
      //重置
      ruleFormRef,
      //嵌套表格
      dialogTableVisible,
      gridData,
      //其他成员
      dialogTable,
      //质检部门
      centerDialogVisible,
      //Tree
      defaultProps,

      //质检人员
      centerDialog,
      multipleSelection,
      multipleSelection2,
      gridData2,
      gridData3,
      router,
      route,
      option,
      //提交按钮
      submitForm,
      getList,
      Banzu,
      multipleSelectionChang,
      multipleSelectionChang2,
      multipleSelectionChang3,
      queding,
      handleNodeClick,
      zhijian,
    };
  },
};
</script>
